<template>
    <div class="centererap">
        <div>
            <div v-for="(item,index) in arr" :key="index">
                <h3>{{item.title}}</h3>
                <div>
                    <img :src="item.smallimg" alt="">
                    <span>{{item.date}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import BScroll from "better-scroll"
// betterscroll 得使用条件是不是只能有一个子元素，且子元素高超过父元素，让父元素overflow：hidden
export default {
    data(){
        return {
            arr:[],
            bs:null
        }
    },
    mounted(){ // 可以获取到dom节点
        axios.get("/midlist").then(res=>{
            this.arr = res.data
            // 当想操作dom但是不生效得时候，vue为我们提供了一个api
            this.$nextTick(()=>{ //this.$nextTick 页面渲染完毕以后执行
                 this.bs = new BScroll(".centererap",{
                scrollY:true,
                click:true
            })
            })
           
        })
    }
    
}
</script>

<style>
    .centererap {
        flex: 1;
        overflow: hidden;
    }
</style>